<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="./script/rem.js"></script>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>

    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script></head>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>

</head>
<body>

    <style>
        body{background:url(./image/user-level-bg.jpg) #fff no-repeat; background-size:100% auto;}
    </style>
    <header class="user-level-head" style="padding-top:0.4rem;">
        <div class="user-level-head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
        <h3>MVP</h3>
        <!-- <div class="user-level-head-r" onclick="memberRules();">会员规则</div> -->
        <div class="head-r"></div>
    </header>

    <div class="user-level-t" id="ids">
       <!-- <div class="user-level-t-t">
            <img class="user-level-t-t-img" src="image/gril.png">
            <dl>
                <dt>匿名用户</dt>
                <dd>有效期：2018.08.12  ~  2018.09.12</dd> 
            </dl>
        </div>
        级别1
        <div class="user-level-t-d">
            <div class="user-level-t-btn" onclick="joinin();">缴费</div>
        </div>
        级别2
        <div class="user-level-t-d" style="display:none;">
            <span>
                团队成员
                <p>5人</p>
            </span>
            <span>
                直属
                <p>3人</p>
            </span>
            <div class="user-level-t-btn">缴费</div>
        </div> -->
    </div>

    <script type="text/template" id="template_id">
        {{?it.data.vip_state == 0}}
        <div class="user-level-t-t">
            <img class="user-level-t-t-img" src="{{=it.data.avatar}}">
            <dl>
                <dt>{{=it.data.name}}</dt>
                <dd></dd>
            </dl>
            <!-- <img class="user-level-t-t-icon" src="image/user-level-1.png"> -->
        </div>
        <!-- 级别1 -->
        <div class="user-level-t-d">
            <div class="user-level-t-btn" tapmode onclick="joinin({{=it.data.is_paid}});">缴费</div>
        </div>
        {{??}}
        <div class="user-level-t-t">
            <img class="user-level-t-t-img" src="{{=it.data.avatar}}">
            <dl>
                <dt>{{=it.data.name}}</dt>
                <!-- <dd>有效期：{{=it.data.vip_paid_at}}  ~  {{=it.data.vip_expired_at}}</dd> -->
            </dl>
            <img id="pic" class="user-level-t-t-icon" src="image/user-level-111.png">
        </div>
        <!-- 级别2 -->
        <div class="user-level-t-d">
            <span>
                团队成员
                <p>{{=it.data.number_team}}人</p>
            </span>
            <span>
                直属
                <p>{{=it.data.number_personal}}人</p>
            </span>
            <div class="user-level-t-btn" tapmode onclick="joinin({{=it.data.is_paid}});">续费</div>
        </div>
        {{?}}
    </script>

    <div class="user-level-d" id="user-level-id">
        <!-- <img src="image/uplevel.png">
        <div class="user-level-d-m">
            可缴纳 <span>500</span> 元即可成为 <i>V2</i>！
        </div>
        <div class="user-level-d-btn">升到二级</div> -->
    </div>

    <script type="text/template" id="user-level">
        <img src="image/uplevel.png">
        <div class="user-level-d-m">
            可缴纳 <span>{{=it.data.integral}}</span> 元即可成为 <i>vip{{=it.data.level_to}}</i>！
        </div>
        <!-- <div class="user-level-d-btn" id="user_new_level" tapmode onclick="user_update();">升到二级</div>    -->
    </script>


</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/javascript">

    apiready = function(){
        // 添加监听 刷新页面
        reloadListener(); 
        user_info();
    }

    // 获取用户信息
    function user_info(){
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var token = $api.getStorage('token');
        api.ajax({
            url: webAddress + '/api/auth/info',
            method: 'get',
            data: {
             values: {
             },
         },
         headers: {
            Authorization: 'Bearer ' + token,
            Accept: 'application/json',
        },
    },function(ret, err){
        if (ret) {
            api.hideProgress();
            // alert( JSON.stringify( ret ) );
            var template = $api.byId('template_id');
            var dotFn = doT.template(template.innerHTML);
            var html = dotFn(ret);
            var list = $api.byId('ids');
            $api.html(list, html);
            var pic = $api.byId('pic');
            if(ret.data.level == 1){

            }else if(ret.data.level == 2){
                pic.src = "image/user-level-222.png";
            }else if(ret.data.level == 3){
                pic.src = "image/user-level-333.png";
            }else if(ret.data.level == 4){
                pic.src = "image/user-level-444.png";
            }
                // if(ret.data.level != 0){
                //     if(ret.data.upgrade_state == 1){
                //         user_upgrade();
                //     }
                // }
            } else {
                alert( JSON.stringify( err ) );
            }
        });
    }

    // // 用户_立即升级
    // function user_update(){
    //     var token = $api.getStorage('token');
    //     api.ajax({
    //         url: webAddress + '/api/user/upgrade/update',
    //         method: 'post',
    //         data: {
    //             values: { 

    //             },
    //         },
    //         headers: {
    //             Authorization: 'Bearer ' + token,
    //             Accept: 'application/json',
    //         },        
    //     },function(ret, err){
    //         if (ret) {
    //             // alert( JSON.stringify( ret ) );
    //         } else {
    //             alert( JSON.stringify( err ) );
    //         }
    //     });
    // }

    // 用户获取升级信息
    function user_upgrade(){
        var token = $api.getStorage('token');
        api.ajax({
            url: webAddress + '/api/user/upgrade/show',
            method: 'get',
            data: {
                values: { 

                },
            },
            headers: {
                Authorization: 'Bearer ' + token,
                Accept: 'application/json',
            },
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                var template = $api.byId('user-level');
                var dotFn = doT.template(template.innerHTML);
                var html = dotFn(ret);
                var list = $api.byId('user-level-id');
                $api.html(list, html);
                var user_new_level = $api.byId('user_new_level');
                if(ret.data.level_to == 2){        
                    user_new_level.innerHTML = "升到二级";
                }else if(ret.data.level_to == 3){
                    user_new_level.innerHTML = "升到三级";
                }else if(ret.data.level_to == 4){
                    user_new_level.innerHTML = "升到四级";
                }
            } else {
                // alert( JSON.stringify( err ) );
            }
        });
    }

    // 缴费
    function joinin(is_paid){
        // if(is_paid == 0){
            api.openWin({
                name: 'vip_good',
                url: './goods_details_vip.html',
                pageParam: {
                    name: 'test'
                }
            });
        // }else if(is_paid == 1){
        //     api.toast({
        //         msg: '会员未过期，不能续费！',
        //         duration: 2000,
        //         location: 'bottom'
        //     });
        // }
        
    }

    // function joinin(vip_state){
    //         api.openWin({
    //             name: 'vip_good',
    //             url: './goods_details_vip.html',
    //             pageParam: {
    //                 name: 'test'
    //             }
    //         });
    // }

    // 会员规则
    function memberRules(){
        api.openWin({
            name: 'web_view',
            url: './web_view.html',
            pageParam: {
                url: 'http://yipinyizhuan.com/api/wap/html?key=user_rule',
                title: '会员规则',
            }
        });
    }

    // 监听事件 (页面刷新)
    function reloadListener(){
      api.addEventListener({
        name: 'reload',
    }, function(ret, err){
       user_info();
   });
  }

  function closeWin(){
    api.closeWin({
    });
}
</script>
</html>